pAjax({
  url: '../server/cat_all.php',
  type: 'get'
}).then((res) => {
  var level = document.querySelector('.level')
  var allArr = JSON.parse(res)
  var oneArr = [...allArr]
  var twoArr = [...allArr]
  var threeArr = [...allArr]

  // 一级菜单去重
  for (var i = 0; i < oneArr.length; i++) {
    for (var j = i + 1; j < oneArr.length; j++) {
      if (oneArr[i].cat_one_id == oneArr[j].cat_one_id) {
        oneArr.splice(j, 1)
        j--
      }
    }
  }
  // 给一级菜单添加内容
  oneArr.forEach((ele) => {
    var catOne = document.createElement('li')
    catOne.setAttribute('data-cat', ele.cat_one_id)
    catOne.innerHTML = `
    <a href="../html/list.html" target="_blank"><span>${ele.cat_one_id}</span></a>
    <div class="menuBox">
    <div class="menulist">
    </div>
    <dl class="about">
      <dt>关于品牌</dt>
      <dd>
        <a href="javascript:;">卡西欧</a>
        <a href="javascript:;">卡西欧</a>
        <a href="javascript:;">卡西欧</a>
        <a href="javascript:;">卡西欧</a>
        <a href="javascript:;">卡西欧</a>
        <a href="javascript:;">卡西欧</a>
      </dd>
    </dl>
    </div>
    `
    level.appendChild(catOne)
  })
  // 二级菜单去重
  for (let i = 0; i < twoArr.length; i++) {
    for (let j = i + 1; j < twoArr.length; j++) {
      if (twoArr[i].cat_two_id == twoArr[j].cat_two_id) {
        twoArr.splice(j, 1)
        j--
      }
    }
  }
  oneArr.forEach((ele, index) => {
    var yiji = level.children[index].querySelector('.menulist')
    twoArr.forEach((e) => {
      if (e.cat_one_id == ele.cat_one_id) {
        var erji = document.createElement('dl')
        erji.setAttribute('data-cat', e.cat_two_id)
        erji.className = 'ej'
        erji.innerHTML = `  
            <dt>${e.cat_two_id}</dt>
            <dd></dd>
        `
        yiji.appendChild(erji)
      }
    })
  })

  // 三级菜单去重
  for (var i = 0; i < threeArr.length; i++) {
    for (var j = i + 1; j < threeArr.length; j++) {
      if (threeArr[i].cat_threeArr_id == threeArr[j].cat_three_id) {
        three.splice(j, 1)
        j--
      }
    }
  }
  var ej = document.querySelectorAll('.ej')
  ej.forEach((ele) => {
    threeArr.forEach((e) => {
      if (ele.getAttribute('data-cat') == e.cat_two_id) {
        ele.querySelector('dd').innerHTML += `
       <span>|</span>
       <a href="../html/list.html" target="_blank">${e.cat_three_id}</a>
       `
      }
    })
  })
})
var oneF = document.querySelector('#oneF')
var itemmain = oneF.querySelector('.itemmain')
var onebt = oneF.querySelector('.onebt')
var conmenav = oneF.querySelector('.conmenav')
var oUl1 = oneF.querySelector('.itemmainr')
var key = oneF.querySelector('.keylist')

var itemmain2 = twoF.querySelector('.itemmain')
var onebt2 = twoF.querySelector('.twobt')
var conmenav2 = twoF.querySelector('.conmenav')
var oUl2 = twoF.querySelector('.itemmainr')
var key2 = twoF.querySelector('.keylist')

var itemmain3 = threeF.querySelector('.itemmain')
var onebt3 = threeF.querySelector('.threebt')
var conmenav3 = threeF.querySelector('.conmenav')
var oUl3 = threeF.querySelector('.itemmainr')
var key3 = threeF.querySelector('.keylist')

var oUl = document.querySelectorAll('.itemmainr')

// 主体
pAjax({
  url: '../server/cat_two.php',
  type: 'post',
  data: {
    onecat: onebt.innerHTML
  }
}).then((res) => {
  let nav1 = JSON.parse(res)
  nav1.forEach((ele) => {
    let lis = document.createElement('li')
    lis.innerHTML = `
    <a href="javascript:;">${ele.cat_two_id}</a>
    `
    conmenav.appendChild(lis)

    key.innerHTML+=`
    <a href="javascript:;">${ele.cat_two_id}</a>
    `
  })
  nav1.forEach((ele, index) => {
    pAjax({
      url: '../server/cat_goods.php',
      type: 'post',
      data: {
        goodsitem: ele.cat_two_id
      }
    }).then((res) => {
      let goods = JSON.parse(res)
      let citem = document.createElement('ul')
      if (index == 0) {
        citem.className = 'cont itemmainc mainitemac'
      } else {
        citem.className = 'cont itemmainc'
      }
      goods.forEach(e => {
        citem.innerHTML += `
      <li class="borderlb">
      <div class="mainitemimg"><a href="../html/details.html?id=${e.goods_id}" target="_blank"><img src="${e.goods_big_logo}" alt=""></a></div>
      <a href="../html/details.html?id=${e.goods_id}" target="_blank">${e.goods_name}</a>
      <span>${e.goods_price}</span>
    </li>
      `
      })
      itemmain.insertBefore(citem, oUl1)
      // 标题滑动
      var navBox = document.querySelectorAll('.navmove')
      navBox.forEach(function (ele) {
        move(ele)
      })
    })
  })


  oUl.forEach((ele) => {
    pAjax({
      url: '../server/random.php',
      type: 'get'
    }).then((res) => {
      var randArr = JSON.parse(res)
      // console.log(randArr);
      blow(ele, randArr)
    })
  })
})

pAjax({
  url: '../server/cat_two.php',
  type: 'post',
  data: {
    onecat: onebt2.innerHTML
  }
}).then((res) => {
  let nav1 = JSON.parse(res)
  // console.log(nav1);
  nav1.forEach((ele) => {
    let lis = document.createElement('li')
    lis.innerHTML = `
    <a href="javascript:;">${ele.cat_two_id}</a>
    `
    conmenav2.appendChild(lis)
    key2.innerHTML+=`
    <a href="javascript:;">${ele.cat_two_id}</a>
    `
  })
  nav1.forEach((ele, index) => {
    pAjax({
      url: '../server/cat_goods.php',
      type: 'post',
      data: {
        goodsitem: ele.cat_two_id
      }
    }).then((res) => {
      let goods = JSON.parse(res)
      let citem = document.createElement('ul')
      if (index == 0) {
        citem.className = 'cont itemmainc mainitemac'
      } else {
        citem.className = 'cont itemmainc'
      }
      goods.forEach(e => {
        citem.innerHTML += `
      <li class="borderlb">
      <div class="mainitemimg"><a href="../html/details.html?id=${e.goods_id}" target="_blank"><img src="${e.goods_big_logo}" alt=""></a></div>
      <a href="../html/details.html?id=${e.goods_id}" target="_blank">${e.goods_name}</a>
      <span>${e.goods_price}</span>
    </li>
      `
      })
      itemmain2.insertBefore(citem, oUl2)
      // 标题滑动
      var navBox = document.querySelectorAll('.navmove')
      navBox.forEach(function (ele) {
        move(ele)
      })
    })
  })


  // oUl.forEach((ele) => {
  //   pAjax({
  //     url: '../server/random.php',
  //     type: 'get'
  //   }).then((res) => {
  //     var randArr = JSON.parse(res)
  //     // console.log(randArr);
  //     blow(ele, randArr)
  //   })
  // })
})
pAjax({
  url: '../server/cat_two.php',
  type: 'post',
  data: {
    onecat: onebt3.innerHTML
  }
}).then((res) => {
  let nav1 = JSON.parse(res)
  // console.log(nav1);
  nav1.forEach((ele) => {
    let lis = document.createElement('li')
    lis.innerHTML = `
    <a href="javascript:;">${ele.cat_two_id}</a>
    `
    conmenav3.appendChild(lis)
    key3.innerHTML+=`
    <a href="javascript:;">${ele.cat_two_id}</a>
    `
  })
  nav1.forEach((ele, index) => {
    pAjax({
      url: '../server/cat_goods.php',
      type: 'post',
      data: {
        goodsitem: ele.cat_two_id
      }
    }).then((res) => {
      let goods = JSON.parse(res)
      let citem = document.createElement('ul')
      if (index == 0) {
        citem.className = 'cont itemmainc mainitemac'
      } else {
        citem.className = 'cont itemmainc'
      }
      goods.forEach(e => {
        citem.innerHTML += `
      <li class="borderlb">
      <div class="mainitemimg"><a href="../html/details.html?id=${e.goods_id}" target="_blank"><img src="${e.goods_big_logo}" alt=""></a></div>
      <a href="../html/details.html?id=${e.goods_id}" target="_blank">${e.goods_name}</a>
      <span>${e.goods_price}</span>
    </li>
      `
      })
      itemmain3.insertBefore(citem, oUl3)
      // 标题滑动
      var navBox = document.querySelectorAll('.navmove')
      navBox.forEach(function (ele) {
        move(ele)
      })
    })
  })


  // oUl.forEach((ele) => {
  //   pAjax({
  //     url: '../server/random.php',
  //     type: 'get'
  //   }).then((res) => {
  //     var randArr = JSON.parse(res)
  //     // console.log(randArr);
  //     blow(ele, randArr)
  //   })
  // })
})